<template>
  <div class="dashboard-container">
    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="panel-group">
      <el-col :xs="24" :sm="12" :md="6" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">员工总数</div>
            <count-to :start-val="0" :end-val="employeeCount" :duration="2600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-message">
            <i class="el-icon-message"></i>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">待办消息</div>
            <count-to :start-val="0" :end-val="messageCount" :duration="3000" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <i class="el-icon-money"></i>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">季度销售额</div>
            <count-to :start-val="0" :end-val="quarterSales" :duration="3200" class="card-panel-num" :decimals="2" prefix="￥"/>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shopping">
            <i class="el-icon-shopping-cart-full"></i>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">年度销售额</div>
            <count-to :start-val="0" :end-val="yearSales" :duration="3600" class="card-panel-num" :decimals="2" prefix="￥"/>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 销售额趋势图 -->
    <el-card class="chart-card">
      <div slot="header" class="chart-header">
        <span class="chart-title">销售额趋势</span>
        <div class="chart-controls">
          <el-radio-group v-model="chartType" size="small">
            <el-radio-button label="month">月度</el-radio-button>
            <el-radio-button label="year">年度</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="chart-wrapper">
        <div ref="salesChart" style="width: 100%; height: 350px;"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import CountTo from 'vue-count-to'

export default {
  name: 'Home',
  components: {
    CountTo
  },
  data() {
    return {
      chartType: 'month',
      employeeCount: 256,
      messageCount: 12,
      quarterSales: 276899.45,
      yearSales: 1256789.23,
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.salesChart)
      this.setChartData()
    },
    setChartData() {
      // 生成模拟数据
      const expectedData = Array.from({ length: 12 }, () => 
        Math.floor(Math.random() * 5000 + 8000)
      )
      const actualData = expectedData.map(val => 
        val + Math.floor(Math.random() * 2000 - 1000)
      )
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        legend: {
          data: ['预期销售额', '实际销售额'],
          top: 25,
          right: 10,
          itemHeight: 8,
          itemWidth: 8,
          textStyle: {
            fontSize: 12
          }
        },
        grid: {
          top: 70,
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        title: {
          left: 'center',
          top: 0,
          textStyle: {
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 12,
            margin: 15
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#eee',
              type: 'dashed'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 12,
            margin: 15
          }
        },
        series: [
          {
            name: '预期销售额',
            type: 'line',
            data: expectedData,
            smooth: true,
            showSymbol: true,
            symbol: 'circle',
            symbolSize: 3,
            emphasis: {
              scale: true,
              symbolSize: 6,
            },
            itemStyle: {
              color: '#409EFF',
              borderColor: '#409EFF',
              borderWidth: 0
            },
            emphasis: {
              itemStyle: {
                color: '#fff',
                borderColor: '#409EFF',
                borderWidth: 2
              }
            },
            lineStyle: {
              width: 2,
              color: '#409EFF',
              shadowColor: 'rgba(64,158,255,0.2)',
              shadowBlur: 15,
              shadowOffsetY: 2,
              cap: 'round'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(64,158,255,0.08)'
                }, {
                  offset: 1,
                  color: 'rgba(64,158,255,0)'
                }]
              }
            }
          },
          {
            name: '实际销售额',
            type: 'line',
            data: actualData,
            smooth: true,
            showSymbol: true,
            symbol: 'circle',
            symbolSize: 3,
            emphasis: {
              scale: true,
              symbolSize: 6,
            },
            itemStyle: {
              color: '#67C23A',
              borderColor: '#67C23A',
              borderWidth: 0
            },
            emphasis: {
              itemStyle: {
                color: '#fff',
                borderColor: '#67C23A',
                borderWidth: 2
              }
            },
            lineStyle: {
              width: 2,
              color: '#67C23A',
              shadowColor: 'rgba(103,194,58,0.2)',
              shadowBlur: 15,
              shadowOffsetY: 2,
              cap: 'round'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(103,194,58,0.08)'
                }, {
                  offset: 1,
                  color: 'rgba(103,194,58,0)'
                }]
              }
            }
          }
        ]
      }
      
      this.chart.setOption(option)
    }
  },
  watch: {
    chartType() {
      this.setChartData()
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  margin-top: 0%;
}

.panel-group {
  margin-bottom: 20px;
}

.card-panel-col {
  margin-bottom: 20px;
}

.card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.card-panel:hover {
  transform: translateY(-4px);
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .09);
}

.card-panel-icon-wrapper {
  float: left;
  margin: 14px 0 0 14px;
  padding: 16px;
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
}

.card-panel-icon-wrapper i {
  font-size: 32px;
}

.icon-people {
  color: #40c9c6;
  background: rgba(64, 201, 198, 0.1);
}

.icon-message {
  color: #36a3f7;
  background: rgba(54, 163, 247, 0.1);
}

.icon-money {
  color: #f4516c;
  background: rgba(244, 81, 108, 0.1);
}

.icon-shopping {
  color: #34bfa3;
  background: rgba(52, 191, 163, 0.1);
}

.card-panel-description {
  float: right;
  font-weight: bold;
  margin: 26px 20px 0 0;
}

.card-panel-text {
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  margin-bottom: 12px;
}

.card-panel-num {
  font-size: 20px;
}

.chart-card {
  margin-bottom: 10px;
  position: relative;
}

.chart-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  position: relative;
  height: 50px;
}

.chart-title {
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
}

.chart-controls {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.el-radio-group {
  display: inline-flex;
}

.chart-wrapper {
  background: #fff;
  padding: 0 10px;
}

.el-radio-group {
  position: static;
  right: auto;
}
</style>